<template>
  <div class="elegantDemeanor">
    <div class="title"><p>课程分类</p></div>
    <div class="elegantBox">
      <!--      图片-->
      <div class="elegantImg">
        <img src="" alt="">
      </div>
      <!--      小矩形-->
      <div class="elegantBo">
        <p>课程名称</p>
        <el-button type="primary">主要按钮</el-button>
      </div>
    </div>
    <div class="elegantBox">
      <!--      图片-->
      <div class="elegantImg">
        <img src="" alt="">
      </div>
      <!--      小矩形-->
      <div class="elegantBo">
        <p>课程名称</p>
        <el-button type="primary">主要按钮</el-button>
      </div>
    </div>

    <div class="elegantBox">
      <!--      图片-->
      <div class="elegantImg">
        <img src="" alt="">
      </div>
      <!--      小矩形-->
      <div class="elegantBo">
        <p>课程名称</p>
        <el-button type="primary">主要按钮</el-button>
      </div>
    </div>
    <div class="elegantBox">
      <!--      图片-->
      <div class="elegantImg">
        <img src="" alt="">
      </div>
      <!--      小矩形-->
      <div class="elegantBo">
        <p>课程名称</p>
        <el-button type="primary">主要按钮</el-button>
      </div>
    </div>

<!--      <div class="pic-box">-->
<!--               <div class="waterfull-box">-->
<!--                <vue-waterfall-easy :imgsArr="picList" :imgWidth="390" :maxCols="3" :imgHeight="390" :gap="10" :loadingDotCount='0' class="test">-->
<!--                    <div slot-scope="props"-->
<!--                             style="padding: 10px;color: #666666;overflow: hidden"-->
<!--                      >-->
<!--                         <el-tooltip class="item" effect="dark" :content="props.value.info" placement="bottom">-->
<!--                        <div>{{props.value.title}}</div>-->
<!--                        </el-tooltip>-->
<!--                     </div>-->

<!--                 </vue-waterfall-easy>-->
<!--            </div>&ndash;&gt;-->
<!--        </div>-->
  </div>

</template>

<script>
// import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  name: 'elegantDemeanor',
  props: {
    picList: Array
  },
  components: {
    // vueWaterfallEasy
  },
}
</script>

<style scoped lang="less">
.elegantDemeanor {
  overflow: hidden;

  .title {
    margin: 50px 0px 20px 0;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    text-align: left;

    img {
      padding-right: 6px;
    }
  }

  .elegantBox {
    position: relative;
    float: left;
    width: 282px;
    height: 361px;
    margin-right: 24px;
    //图片
    .elegantImg {
      height: 320px;
      background-color: #e27979;

      img {
        width: 100%;
      }
    }

    //小矩形
    .elegantBo {
      position: absolute;
      top: 279px;
      left: 9px;
      width: 264px;
      height: 82px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

      p {
        margin: 10px auto 0;
        width: 56px;
        height: 21px;
        color: rgba(48, 48, 48, 1);
        font-size: 14px;
      }

      /deep/ .el-button {
        padding: 2px 5px;
        font-size: 10px;
      }

      /deep/ .el-button--primary {
        margin-top: 10px;
        width: 79px;
        height: 23px;
        background: rgba(67, 146, 253, 1);
        border-radius: 15px;
      }
    }
  }

  .elegantBox:last-child {
    margin-right: 0;
  }

  //.pic-box{
  //    position: relative;
  //    width: 100%;
  //    height: 1000px;
  //    ::v-deep.waterfull-box{
  //        position: absolute;
  //        top:6px;
  //        bottom:0;
  //        width:100%;
  //        .vue-waterfall-easy-scroll{
  //            overflow-y: auto;
  //        }
  //    }
  //}
}

</style>
